import './Home.scss'
import React, { Component } from 'react'
import {NavLink, Route} from 'react-router-dom'
import DiscoverPage from '../components/Home/DiscoverPage.jsx'
import SongDetailPage from '../components/Home/SongDetailPage'
import PlayList from '../components/Home/PlayList'
import TopList from '../components/Home/TopList'
import CacheRoute from 'react-router-cache-route'
import Djradio from '../components/Home/Djradio'

export default class Home extends Component {
  constructor (props) {
    super(props)
    this.state= {
      isNavAct:0
    }
  }
  componentDidMount () {
  }
  changeNav (i) {
    this.setState({
      isNavAct: i
    })
  }
  render() {
    return (
      <div className="home_page">
        <div className="home_nav">
          <div className="center_nav_box">
            <div className="empty" />
            <ul>
              <li><NavLink activeClassName='nav_act' exact to="/discover/">推荐</NavLink></li>
              <li><NavLink activeClassName='nav_act' to="/discover/toplist">排行榜</NavLink></li>
              <li><NavLink activeClassName='nav_act' to="/discover/playlist">歌单®</NavLink></li>
              <li><NavLink activeClassName='nav_act' to="/discover/djradio">主播电台</NavLink></li>
              <li><NavLink activeClassName='nav_act' to="/discover/artist">歌手</NavLink></li>
              <li><NavLink activeClassName='nav_act' to="/discover/album">新碟上架</NavLink></li>
            </ul>
          </div>
        </div>
        <div className="discover_container">
          <CacheRoute path='/discover/' exact component={DiscoverPage}  when="always"></CacheRoute>
          <Route path='/discover/song/:id' exact component={SongDetailPage}></Route>
          <CacheRoute path='/discover/toplist' exact component={TopList}></CacheRoute>
          <Route path='/discover/playlist' exact component={PlayList}></Route>
          <Route path='/discover/djradio' component={Djradio}></Route>
        </div>
      </div>
    )
  }
}
